<template>
    <view class="article-detail_container">
        <view class="imgs">
            <image class="myimg" :src="current.coverImage"></image>
        </view>
        <view class="icon" @click="goBack">
            <image class="iconImg"  src="@/static/back.png"></image>
        </view>
        <view class="bao">
            <view class="article-detail_head">
                <view class="title">{{ current.title }}</view>
                <view class="div">
                    <view class="left">
                        <u-icon name="red-packet" color="#666666" size="40"></u-icon>
                        <view class="child">
                            <view class="text">活动费用：</view>
                            <view class="text">{{ current.expenses }}元</view>
                        </view>
                    </view>
                    <view class="line"></view>
                    <view class="left">
                        <u-icon name="clock" color="#666666" size="40"></u-icon>
                        <view class="child">
                            <view class="text">活动人数：</view>
                            <view class="text">{{ current.personNum }}人</view>
                        </view>
                    </view>
                </view>
                <view class="date">
                    <view class="top">活动分类</view>
                    <view class="bottom">{{ current.classify }}</view>
                </view>
                <view class="date">
                    <view class="top">活动地点：</view>
                    <view class="bottom">{{ current.place }}</view>
                </view>
                <view class="date">
                    <view class="top">活动规则：</view>
                    <view class="bottom border">
                        <text>报名状态:</text>
                        <text>{{ currentStatus }}</text>
                        {{ current.startTime }}至{{ current.endTime }}
                    </view>
                    <view class="bottom border">
                        <text>活动时间:</text>
                        <text> {{ current.startTime }}至{{ current.endTime }}</text>
                    </view>
                    <view class="bottom border">
                        <text>报名时间:</text>
                        <text> {{ current.signUpStartTime }}至{{ current.signUpEndTime }}</text>
                    </view>
                    <view class="bottom border">
                        <text>审核规则:</text>
                        <text>报名后需要审核</text>
                    </view>
                    <view class="bottom border">
                        <text>取消规则:</text>
                        <text>报名后在限定范围时间内可取消</text>
                    </view>
                </view>
                <view class="date">
                    <view class="top">活动流程：</view>
                    <view class="process">
                        <timeline>
                            <timelineItem :leftTime='index + 1' v-for="(item, index) in current.processArr"
                                :key="idnex">
                                <view class="tripItem">
                                    <view class="title">{{ item }}</view>
                                </view>
                            </timelineItem>
                        </timeline>
                    </view>
                </view>
                <view class="date">
                    <view class="top">活动内容：</view>
                    <u-parse :content="current.content" @preview="preview" @navigate="navigate" />
                </view>
                <!-- <view class="imgBao">
                    <img class="img" v-if="current.coverImage" :src='current.coverImage' alt="">
                </view> -->
            </view>
            <view class="btns">
                <view class="btn btn1" @click="goCollection">
                    <u-icon name="star" color="#000" size="28"></u-icon>
                    <text style="margin-left: 20rpx;">{{ current.ifCollection == 'Y' ? '取消收藏' : '收藏' }}</text>
                </view>
                <view class="btn btn2" @click="goBm">{{ btnLabel }}</view>
            </view>
        </view>

    </view>
</template>

<script>
import baseApi from "@/config/baseApi.js";
import { getActivityDetails, applyJoin, activitySignUp, cancelSignUp, collectionConfirm, collectionCancel } from "@/api/data";
import timeline from '@/components/chenbin-timeline/timeLine.vue'
import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'
export default {
    components: {
        timeline,
        timelineItem
    },
    data() {
        return {
            current: {},
            id: '',//活动id
            societiesId: '',//社团id
        }
    },
    computed: {
        currentStatus() {
            //时间戳比较
            let currentDate = Date.parse(new Date());
            let signUpStartTime = Date.parse(this.current.signUpStartTime);
            let signUpEndTime = Date.parse(this.current.signUpEndTime);
            if (currentDate > signUpStartTime && currentDate < signUpEndTime) {
                return '报名中'
            }
            if (currentDate > signUpEndTime) {
                return '报名已结束'
            }
            if (currentDate < signUpEndTime) {
                return '报名未开始'
            }
        },
        btnLabel() {
            // 0:未在此社团 1:未报名 2:已报名
            if (this.current.participateStatus == '0') {
                return '申请入团'
            }
            if (this.current.participateStatus == '1') {
                // 未报名
                let currentDate = Date.parse(new Date());
                let signUpStartTime = Date.parse(this.current.signUpStartTime);
                let signUpEndTime = Date.parse(this.current.signUpEndTime);
                if (currentDate > signUpStartTime && currentDate < signUpEndTime) {
                    return '我要报名'
                }
                if (currentDate > signUpEndTime) {
                    return '报名已结束'
                }
                if (currentDate < signUpEndTime) {
                    return '报名未开始'
                }
            }
            if (this.current.participateStatus == '2') {
                // 已报名
                return '取消报名'
            }
        },
    },
    onLoad(query) {
        this.id = query.id;
        this.societiesId = query.societiesId;
        this.getDetails(query.id);
    },
    methods: {
        // 获取详情接口
        async getDetails(id) {
            const { data } = await getActivityDetails(id);
            process
            this.current = data;
            if (this.current.process) {
                this.current.processArr = this.current.process.split(',').reverse();
            } else {
                this.current.processArr = []
            }
            this.current.coverImage = 'http://127.0.0.1:4444/api/upload/' + data.coverImage;
            this.current.startTime = uni.$u.timeFormat(data.startTime, "yyyy-mm-dd");
            this.current.endTime = uni.$u.timeFormat(data.endTime, "yyyy-mm-dd");
            this.current.signUpStartTime = uni.$u.timeFormat(data.signUpStartTime, "yyyy-mm-dd");
            this.current.signUpEndTime = uni.$u.timeFormat(data.signUpEndTime, "yyyy-mm-dd");
        },
        // 点击报名
        goBm() {
            const that = this;
            if (that.current.participateStatus == '0') {
                uni.showModal({
                    title: '是否申请入团？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: function (res) {
                        if (res.confirm) {
                            applyJoin(that.societiesId).then((res) => {
                                if (res.code == '200') {
                                    uni.$u.toast("申请成功！");
                                    that.getDetails(that.id)
                                }
                            })
                            // 用户点击确定按钮的逻辑处理
                        } else if (res.cancel) {
                            // 用户点击取消按钮的逻辑处理
                        }
                    }
                });
            } else if (that.current.participateStatus == '1') {
                if (that.btnLabel == '我要报名') {
                    uni.showModal({
                        title: '是否申请报名？',
                        cancelText: '取消',
                        confirmText: '确定',
                        success: function (res) {
                            if (res.confirm) {
                                activitySignUp(that.id).then((res) => {
                                    if (res.code == '200') {
                                        uni.$u.toast("报名成功！");
                                        that.getDetails(that.id)
                                    }
                                })
                                // 用户点击确定按钮的逻辑处理
                            } else if (res.cancel) {
                                // 用户点击取消按钮的逻辑处理
                            }
                        }
                    });

                } else {
                    uni.$u.toast(that.btnLabel);
                    return
                }
            } else if (that.current.participateStatus == '2') {
                // 已报名
                uni.showModal({
                    title: '是否取消报名？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: function (res) {
                        if (res.confirm) {
                            cancelSignUp(that.id).then((res) => {
                                if (res.code == '200') {
                                    uni.$u.toast("取消成功！");
                                    that.getDetails(that.id)
                                }
                            })
                            // 用户点击确定按钮的逻辑处理
                        } else if (res.cancel) {
                            // 用户点击取消按钮的逻辑处理
                        }
                    }
                });
            }
        },
        goBack(){
            uni.navigateBack({
				delta: 1,
			});
        },
        // 点击收藏
        async goCollection() {
            const api = this.current.ifCollection == 'Y' ? collectionCancel : collectionConfirm
            const res = await api({ activityId: this.current.id })
            if (res.code == 200) {
                uni.$u.toast(res.msg);
                this.getDetails(this.id)
            } else {
                uni.$u.toast(res.msg);
            }
        }
    }
}
</script>

<style scoped lang="scss">
.article-detail_container {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;

    .myimg {
        width: 100%;
        height: 380rpx;
    }

    .icon {
        position: absolute;
        top: 108rpx;
        left: 50rpx;
        .iconImg{
            width:70rpx;
            height:70rpx;
        }
    }

    .bao {
        width: 100%;
        height: calc(100% - 380rpx);
        box-sizing: border-box;
        overflow-y: scroll;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        margin-top: -50rpx;
        padding: 30rpx 20rpx 50rpx 20rpx;
        background-color: #fff;
    }

    .article-detail_head {
        width: 100%;
        height: calc(100vh - 160rpx);
        box-sizing: border-box;
        overflow-y: scroll;
        background-color: #fff;

        .title {
            color: #000;
            font-size: 32rpx;
            margin-bottom: 16rpx;
            font-weight: 700;
            box-sizing: border-box;
            text-align: center;
            width: 100%;
        }

        .div {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .left {
                width: 49%;
                display: flex;
                justify-content: center;
                align-items: center;

                .child {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    margin-left: 10rpx;

                    .text {
                        font-size: 24rpx;
                        color: #666666;
                    }
                }
            }

            .line {
                width: 1px;
                height: 40rpx;
                background-color: #000;
                margin: 0 30rpx;
            }
        }

        .img {
            width: 100%;
            border-radius: 8rpx;
            margin-bottom: 10rpx;
            border: 2rpx solid #dedede;
        }

        .date {
            width: 100%;
            margin-top: 30rpx;

            .top {
                width: 100%;
                color: #000;
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 20rpx;
            }

            .bottom {
                width: 100%;
                color: #666666;
                font-size: 24rpx;
                box-sizing: border-box;
                padding: 0 20rpx;
            }

            .border {
                border-bottom: 1px solid #dedede;
                padding: 20rpx 0;
            }
        }

    }

    .btns {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 30rpx;
        box-shadow:
            inset 0 -3em 3em rgba(0, 0, 0, 0.1),
            0 0 0 2px rgb(255, 255, 255),
            0.3em 0.3em 1em rgba(0, 0, 0, 0.3);

        .btn {
            width: 200rpx;
            height: 80rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn1 {
            background-color: #ffcf60;
            color: #fff;
        }

        .btn2 {
            background-color: #5ac725;
            color: #fff;
        }
    }


    .process {
        width: 100%;
        box-sizing: border-box;
    }

    .tripItem {
        height: 140rpx;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        margin-bottom: 30rpx;

        .title {
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .tips {
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-top: 20rpx;

        }
    }
}
</style>
